<template>
  <el-container class="zwelaside">
    <el-aside>
      <controller-aside @markSeats="markSeats" @clearSeat="clearSeat" @confirm="confirm"
        @seatRender="seatRender" :prop_x="x" :prop_y="y" :prop_templeteName="templeteName"
        :prop_templetePrice="templetePrice" :ipAddress="ipAddress" />
    </el-aside>
    <el-main>
      <coordinate-system ref="coordinateSystem" :prop_x="x" :prop_y="y"
        :prop_templeteId="templeteId" :ipAddress="ipAddress" :prop_seatList="seatList" />
    </el-main>
  </el-container>
</template>

<script>
import ControllerAside from "./components/ControllerAside";
import CoordinateSystem from "./components/CoordinateSystem";
import { mapActions, mapState, mapMutations } from "vuex";
export default {
  name: "HallSeat",
  components: {
    ControllerAside,
    CoordinateSystem,
  },
  props: {},
  data() {
    return {
      seatList: [],
      templeteId: null,
      ipAddress: "",
    };
  },
  watch: {},
  computed: {
    ...mapState({
      fullscreen: (state) => state.config.fullscreen,
      x: (state) => state.hallSeat.x,
      y: (state) => state.hallSeat.y,
      templeteName: (state) => state.hallSeat.templeteName,
      templetePrice: (state) => state.hallSeat.templetePrice,
    }),
    //  取最大横坐标
    xMax: function () {
      let i = 0;
      for (let index in this.seatList) {
        if (this.seatList[index].x > i) {
          i = this.seatList[index].x;
        }
      }
      return i;
    },
    //  取最大纵坐标
    yMax: function () {
      let i = 0;
      for (let index in this.seatList) {
        if (this.seatList[index].y > i) {
          i = this.seatList[index].y;
        }
      }
      return i;
    },
  },
  created() {
    this.ipAddress = this.http.ipAddress;
    this.changeX(0);
    this.changeY(0);
  },
  methods: {
    ...mapMutations(["makeFullscreen"]),
    ...mapMutations([
      "changeX",
      "changeY",
      "changeTempleteName",
      "changeTempletePrice",
    ]),
    ...mapActions(["clearHallSeat"]),
    markSeats(e) {
      this.$refs.coordinateSystem.markSeats(e);
    },
    clearSeat() {
      this.$refs.coordinateSystem.clearSeat();
    },
    confirm() {
      this.$refs.coordinateSystem.confirm();
    },
    seatRender() {
      this.$refs.coordinateSystem.seatRender();
    },
    goback() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="less">
.zwelaside {
  .el-aside {
    overflow-y: auto;
    overflow-x: hidden;
    &::-webkit-scrollbar {
      width: 2px;
    }
    &::-webkit-scrollbar-thumb {
      border-radius: 2px;
      background: rgba(0, 0, 0, 0.2);
    }
    &::-webkit-scrollbar-track {
      border-radius: 0;
      background: rgba(0, 0, 0, 0.1);
    }
  }
}
</style>
<style lang="less" scoped>
.el-container {
  color: rgba(0, 0, 0, 0.4);
  .back {
    position: absolute;
    left: 320px;
    top: 20px;
  }
  .el-main {
    background-color: #e9eef3;
    text-align: center;
    padding: 0;
    .goback {
      position: fixed;
      top: 10px;
      left: 310px;
    }
  }
  .el-aside {
    height: 100vh;
    text-align: center;
    ::-webkit-scrollbar {
      width: 6px;
      height: 6px;

      background-color: #00000040;
    }

    ::-webkit-scrollbar-thumb {
      background-color: rgba(0, 0, 0, 1);
      border-radius: 10px;
    }

    ::-webkit-scrollbar-track {
      background-color: transparent;
    }
  }
}
</style>
